<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
	<title>MyCAT EYE</title>
	<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
	<link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link title="" href="css/style.css" rel="stylesheet" type="text/css" />
	<link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css" />
	<link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled" />
	<link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled" />
	<link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
	<link href="css/jquery.dataTables.min.css" rel="stylesheet" title="" type="text/css" />
	<link href="css/dataTables.semanticui.min.css" rel="stylesheet" title="" type="text/css" />
	<link href="css/semantic.min.css" rel="stylesheet" title="" type="text/css" />
	<link rel="stylesheet" href="css/jquery.mloading.css" />

	<style type="text/css">
		.sm-st {
			background: #fff;
			padding: 20px;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			margin-bottom: 20px;
			-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
			box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
		}

		.sm-st-icon {
			width: 60px;
			height: 60px;
			display: inline-block;
			line-height: 60px;
			text-align: center;
			font-size: 30px;
			background: #eee;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			float: left;
			margin-right: 10px;
			color: #fff;
		}

		.sm-st-info {
			font-size: 12px;
			padding-top: 2px;
		}

		.sm-st-info span {
			display: block;
			font-size: 14px;
			font-weight: 600;
		}

		.orange {
			background: #fa8564 !important;
		}

		.tar {
			background: #45cf95 !important;
		}

		.sm-st .green {
			background: #86ba41 !important;
		}

		.pink {
			background: #AC75F0 !important;
		}

		.yellow-b {
			background: #fdd752 !important;
		}

		.stat-elem {
			background-color: #fff;
			padding: 18px;
			border-radius: 40px;
		}

		.stat-info {
			text-align: center;
			background-color: #fff;
			border-radius: 5px;
			margin-top: -5px;
			padding: 8px;
			-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
			box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
			font-style: italic;
		}

		.stat-icon {
			text-align: center;
			margin-bottom: 5px;
		}

		.st-red {
			background-color: #F05050;
		}

		.st-green {
			background-color: #27C24C;
		}

		.st-violet {
			background-color: #7266ba;
		}

		.st-blue {
			background-color: #23b7e5;
		}

		.stats .stat-icon {
			color: #28bb9c;
			display: inline-block;
			font-size: 26px;
			text-align: center;
			vertical-align: middle;
			width: 50px;
			float: left;
		}

		.stat {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			margin-right: 10px;
		}

		.stat .value {
			font-size: 20px;
			line-height: 24px;
			overflow: hidden;
			text-overflow: ellipsis;
			font-weight: 500;
		}

		.stat .name {
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.stat.lg .value {
			font-size: 26px;
			line-height: 28px;
		}

		.stat.lg .name {
			font-size: 16px;
		}

		.stat-col .progress {
			height: 2px;
		}

		.stat-col .progress-bar {
			line-height: 2px;
			height: 2px;
		}

		.item {
			padding: 30px 0;
		}
	</style>
</head>

<body>
	<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
		<div class="navbar-header">
			<button class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-collapse">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class=""><a class="mystyle-color" href="../index.html">MyCAT EYE&nbsp;&nbsp;&nbsp;</a></li>
			</ul>
			<ul class="nav navbar-nav pull-right">
				<li class="dropdown" style="min-width:165px;">
					<a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mysql：
						<span id="currentServerId" data-value="">所属节点</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu" id="ulNodeList">
						<li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mycat：
						<span id="mycat_server" data-value="">所属节点</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu" id="ulMycatList">
						<li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
					</ul>
				</li>
				<li class="dropdown li-border">
					<a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;
						<span id="login_admin"></span><span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="javascript:void(0)" id="modifyPassword">修改密码</a></li>
						<li><a href="javascript:void(0)" id="logout">退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>

	<div class="down-main">
		<div class="left-main left-full">
			<div class="sidebar-fold">
				<span class="glyphicon glyphicon-menu-hamburger"></span>
			</div>
			<div class="subNavBox">
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon fa fa-angle-down"></span><span
							class="sublist-title">常用功能</span>
					</div>
					<ul class="navContent">
						<li class="active">
							<div class="showtitle">
								<img src="img/leftimg.png" />控制台
							</div>
							<a href="dashboard.html">
								<span class="sublist-icon fa fa-dashboard"></span>
								<span class="sub-title">控制台</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />变量管理
							</div>
							<a href="var-manage.html">
								<span class="sublist-icon fa fa-dot-circle-o"></span>
								<span class="sub-title">变量管理</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon fa fa-angle-down"></span>
						<span class="sublist-title">InnoDB引擎</span>
					</div>
					<ul class="navContent">
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />基本状态
							</div>
							<a href="innodb-status.html">
								<span class="sublist-icon fa fa-heartbeat"></span>
								<span class="sub-title">基本状态</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />事务查看
							</div>
							<a href="innodb-trx.html">
								<span class="sublist-icon fa fa-retweet"></span>
								<span class="sub-title">事务查看</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />锁等待信息
							</div>
							<a href="innodb-lockwaits.html">
								<span class="sublist-icon fa fa-lock"></span>
								<span class="sub-title">锁等待信息</span></a>
						</li>
					</ul>
				</div>
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon fa fa-angle-down"></span>
						<span class="sublist-title">Mysql管理</span>
					</div>
					<ul class="navContent">
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />Mysql集群管理
							</div>
							<a href="cluster-manage.html">
								<span class="sublist-icon fa fa-list"></span>
								<span class="sub-title">Mysql集群管理</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />Mysql节点管理
							</div>
							<a href="node-manage.html">
								<span class="sublist-icon fa fa-cubes"></span>
								<span class="sub-title">Mysql节点管理</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon fa fa-angle-down"></span>
						<span class="sublist-title">Mycat管理</span>
					</div>
					<ul class="navContent">
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />Mycat集群管理
							</div>
							<a href="mycat-cluster.html">
								<span class="sublist-icon fa fa-database"></span>
								<span class="sub-title">Mycat集群管理</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />Mycat节点管理
							</div>
							<a href="mycat-node.html">
								<span class="sublist-icon fa fa-cube"></span>
								<span class="sub-title">Mycat节点管理</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="sBox">
					<div class="subNav sublist-down">
						<span class="title-icon fa fa-angle-down"></span>
						<span class="sublist-title">设置</span>
					</div>
					<ul class="navContent">
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />系统属性
							</div>
							<a href="mycat-setting-myid.html">
								<span class="sublist-icon fa fa-ban"></span>
								<span class="sub-title">系统属性</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />参数配置
							</div>
							<a href="mycat-setting-server.html">
								<span class="sublist-icon fa fa-list-alt"></span>
								<span class="sub-title">参数配置</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />数据源设置
							</div>
							<a href="mycat-setting-schema.html">
								<span class="sublist-icon fa fa-cloud"></span>
								<span class="sub-title">数据源设置</span>
							</a>
						</li>
						<li>
							<div class="showtitle">
								<img src="img/leftimg.png" />分片设置
							</div>
							<a href="mycat-setting-rule.html">
								<span class="sublist-icon fa fa-share"></span>
								<span class="sub-title">分片设置</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="right-product right-full">
			<div class="container-fluid">
				<div class="info-center">
					<div class="page-header">
						<div class="pull-left">
							<h4>控制台</h4>
						</div>
					</div>
					<div class="manage-detail">
						<div class="panel panel-default panel-intro">
							<div class="panel-heading">
								<ul class="nav nav-tabs">
									<li class="active"><a href="#one" data-toggle="tab">概要信息</a>
									</li>
									<li><a href="#two" data-toggle="tab">当前进程</a></li>
								</ul>
							</div>
							<div class="panel-body">
								<div id="myTabContent" class="tab-content">
									<div class="tab-pane fade active in" id="one">
										<div class="row">
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-red"><i
														class="glyphicon glyphicon-plane"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="uptime"></span> 运行时长
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-violet"><i
														class="glyphicon glyphicon-random"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="threadsRunning"></span> 当前连接数
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-blue"><i
														class="glyphicon glyphicon-hourglass"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="dataTotal"></span> 数据量
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-green"><i
														class="glyphicon glyphicon-italic"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="innoDBBufferPoolSize"></span> InnoDB缓存使用率
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-lg-12">
												<div id="qpsChart" style="width: 100%; height: 350px;"></div>
											</div>

										</div>
										<div class="row">
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-red"><i
														class="glyphicon glyphicon-log-out"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="bytesSent"></span> 发送（流量）
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-violet"><i
														class="glyphicon glyphicon-log-in"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="bytesReceived"></span> 接受（流量）
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-blue"><i
														class="glyphicon glyphicon-tasks"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="schemaTotal"></span> Schema数量
													</div>
												</div>
											</div>
											<div class="col-sm-3 col-xs-6">
												<div class="sm-st clearfix">
													<span class="sm-st-icon st-green"><i
														class="glyphicon glyphicon-list-alt"
														style="margin-top: 12px;"></i></span>
													<div class="sm-st-info">
														<span id="tableTotal"></span> Table数量
													</div>
												</div>
											</div>
										</div>
										<div class="row" style="margin-top: 15px;">

											<div class="col-lg-12">
												<h4>语句统计</h4>
											</div>
											<div class="col-lg-12">
												<div id="queryChart" style="width: 100%; height: 350px;"></div>
											</div>

										</div>

									</div>
									<div class="tab-pane fade" id="two">
										<div class="row">
											<div class="col-xs-12">
												<div class="box box-danger">
													<div class="box-body">
														<div class="widget-body no-padding">
															<div id="toolbar" class="toolbar">
																<a href="javascript:;" id="reload"
																	class="btn btn-primary btn-refresh"><i title="刷新进程"
																	class="glyphicon glyphicon-refresh"></i> </a>
															</div>
															<div class="table-responsive no-padding">
																<table class="table  table-hover" style="width: 100%"
																	id="processlist">
																	<thead>
																		<tr>
																			<th>ID</th>
																			<th>User</th>
																			<th>Host</th>
																			<th>db</th>
																			<th>Comand</th>
																			<th>Time</th>
																			<th>State</th>
																			<th>Info</th>
																		</tr>
																	</thead>
																	<tbody id="tbCluster">
																		<!--
																	                    	加载进程列表
																	                    -->
																	</tbody>
																</table>
															</div>

														</div>
													</div>
												</div>
											</div>

										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- javascript -->
	<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="script/jquery.cookie.js" type="text/javascript"></script>
	<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="script/bootbox.min.js" type="text/javascript"></script>
	<script src="script/echarts.common.min.js"></script>
	<script src="script/jquery.dataTables.min.js"></script>
	<!-- loading效果 -->
	<script src="script/jquery.mloading.js"></script>
	<!-- 自定义javascript -->
	<script src="script/custom/menu.js"></script>
	<script src="script/custom/login-auth.js"></script>
	<script src="script/custom/modify-password.js"></script>
	<script src="script/custom/current-node.js"></script>
	<script src="script/custom/dashboard.js"></script>
</body>
</html>
